<template>
<app-navigator defaultPath="normal/button" ref="navigator">
    <article class="app-home">
        <section class="app-header" :style="{ height: HomeConfig.headSize + 'px' }">
            <span @click="goHome">V3-component-xiaokai11</span>
        </section>
        <section class="app-menu" :style="{
          width: HomeConfig.menuSize + 'px',
          top: HomeConfig.headSize + 'px',
        }">
            <app-menu />
        </section>
        <section class="app-content" :style="{
          paddingTop: HomeConfig.headSize + 20 + 'px',
          paddingLeft: HomeConfig.menuSize + 20 + 'px',
        }">
            <app-navigator-page />
        </section>
    </article>
</app-navigator>
</template>

<script lang="ts">
import {
    AppNavigator
} from "./components/navigator/app-navigator";
import {
    AppNavigatorPage
} from "./components/navigator/app-navigator-page";
import AppMenu from "./components/app/app-menu.vue";
import {
    defineComponent
} from "vue";
let HomeConfig = {
    headSize: 60,
    menuSize: 200,
};
export default defineComponent({
    name: "app",
    components: {
        AppNavigator,
        AppNavigatorPage,
        AppMenu,
    },
    data() {
        return {
            HomeConfig: HomeConfig,
        };
    },
    methods: {
        goHome() {
            // console.log(this.$refs.navigator);
            // this.$refs.navigator.$._refer.methods.go("home");
            (this.$refs.navigator as any).$._refer.methods.go("home");
        },
    },
});
// export default {
//   name: "app",
//   components: {
//     AppNavigator,
//     AppNavigatorPage,
//     AppMenu
//   },
//   data() {
//     return {
//       HomeConfig
//     };
//   },
//   methods: {
//     goHome() {
//       console.log(this.$refs.navigator);
//     }
//   }
// };
</script>

<style lang="scss">
html,
body {
    margin: 0;
    padding: 0;
}

.app-home {
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        box-sizing: 0 20px;
        border-bottom: 1px solid #f2f2f2;
        background-color: white;
        color: #42b983;
        font-style: italic;
        font-weight: bold;
    }

    .app-menu {
        position: fixed;
        left: 0;
        bottom: 0;
        border-right: 1px solid #f2f2f2;
        background-color: white;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-content {
        min-height: 100vh;
        box-sizing: border-box;
    }
}
</style>
